<template>
  <div class="customsDeclarationInspectionInfo">
    <div class="_centerInfo" v-show="!loading">
      <div class="_centerInfo_info">
        <div class="__one">报关单号：</div>
        <div class="__two">{{eDataInfo.entryId}}</div>
      </div>
      <div class="_centerInfo_info">
        <div class="__one">查验时间：</div>
        <div class="__two">{{eDataInfo.checkTime}}</div>
      </div>
      <div class="_centerInfo_info">
        <div class="__one">人工查验记录：</div>
        <div class="__two">
          <span class="noCopy">{{manChkNotes}}</span>
          <span class="zhankai" v-if="showZhank" @click="zhankai">展开</span>
          <span class="zhankai" v-if="showShouqi" @click="shouqi">收起</span>
        </div>
      </div>
      <div class="_centerInfo_info">
        <div class="__one">查验处理结果：</div>
        <div class="__two">{{dict[+eDataInfo.result]}}</div>
      </div>
    </div>
    <div class="_center_list" v-show="!loading">
        <div class="_list" v-for="(item,i) in bgdList" :key="i">
          <div class="_list_">
            <span class="_left">项号：</span>
            <span class="_right">{{item.gno}}</span>
          </div>
          <div class="_list_">
            <span class="_left">商品编码：</span>
            <span class="_right">{{item.codeTs}}</span>
          </div>
          <div class="_list_">
            <span class="_left">商品名称：</span>
            <span class="_right">{{item.gname}}</span>
          </div>
          <div class="_list_">
            <span class="_left">规格型号：</span>
            <span class="_right">{{item.gmodel}}</span>
          </div>
          <div class="_list_">
            <span class="_left">申报数量：</span>
            <span class="_right">{{item.gqty}}</span>
          </div>
          <div class="_list_">
            <span class="_left">申报计量单位：</span>
            <span class="_right">{{item.gunitname}}</span>
          </div>
          <!-- <div class="_list_">
            <span class="_left">计量单位名称：</span>
            <span class="_right"></span>
          </div> -->
          <div class="_list_">
            <span class="_left">法定第一数量：</span>
            <span class="_right">{{item.qty1}}</span>
          </div>
          <div class="_list_">
            <span class="_left">法定第一计量单位：</span>
            <span class="_right">{{item.unit1Name}}</span>
          </div>
          <div class="_list_">
            <span class="_left">申报单价：</span>
            <span class="_right">{{item.declPrice}}</span>
          </div>
          <div class="_list_">
            <span class="_left">申报总价：</span>
            <span class="_right">{{item.declTotal}}</span>
          </div>
          <div class="_list_">
             <span class="_left">成交币制：</span>
            <span class="_right">{{item.tradeCurrName}}</span>
          </div>
          
          <div class="_list_">
            <span class="_left">原产国(地区)</span>
            <span class="_right">{{item.originCountryName}}</span>
          </div>
          <div class="_list_">
            <span class="_left">最终目的国(地区)：</span>
            <span class="_right">{{item.destCountryName}}</span>
          </div>
        </div>
    </div>
    <van-loading
      v-show="loading"
      size="40px"
      color="#0d4d8b"
      vertical
    ></van-loading>
  </div>
</template>

<script>
import {dict} from '@/utils/data.js'
import {reqDeclarationFormDetailsHeadList} from '@/api/index.js'
import {decrypt} from '@/utils/AES.js'
export default {
  data(){
    return{
      info:{},
      loading:false,
      bgdList:[],
      dict,
      manChkNotes:'',
      showZhank:false,
      showShouqi:false
    }
  },
  created(){
    this.getList()
  },
  computed:{
    eDataInfo(){
     
      // console.log(JSON.parse(decrypt(this.$route.query.eData)));
      let a=JSON.parse(decrypt(this.$route.query.eData))
      if(a.manChkNotes.length>500){
        this.manChkNotes=a.manChkNotes.slice(0,500)
        this.showZhank=true
      }else {
         this.manChkNotes=a.manChkNotes
      }
     
      return a
    }
  },
  methods:{
    zhankai(){
      this.showShouqi=true
      this.showZhank=false
      this.manChkNotes=this.eDataInfo.manChkNotes
    },
    shouqi(){
      this.showZhank=true
       this.showShouqi=false
      this.manChkNotes=this.eDataInfo.manChkNotes.slice(0,500)
    },
    getList(){
      this.loading=true
       const val=JSON.parse(decrypt(this.$route.query.eData))
      reqDeclarationFormDetailsHeadList({
        ieFlag:val.ieFlag,
        entryId:val.entryId,
        customsOfficerNum:this.$store.state.dashboard.customsUserInfo.persionId
      }).then(res=>{

        this.loading=false
        // this.info=res.data
        this.bgdList=res.data
      }).catch(err=>{
        this.loading=false
        // this.info={}
        this.bgdList=[]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.customsDeclarationInspectionInfo {
  padding: 10px 10px 20px 10px;
  ._centerInfo {
    margin-left: 10px;
    ._centerInfo_info {
    //  font-size: 14px;
     margin: 10px 0;
    //  span {
    //   font-size: 14px;
    //   margin-left: 40px;
    //   color: #888;
    //  }
    display: flex;
    
      .__one {
          width: 100px;
             font-size: 14px;
           
              color: #000;
      }
      .__two {
         font-size: 14px;
            flex: 1;
              color: #888;
              overflow-wrap: break-all;       
              line-height: 20px;       
              .zhankai{

                font-size: 16px;
                margin-right: 10px;
                color:#0d4d8b
              }
              .noCopy {
                  -webkit-user-select:none;
                  -khtml-user-select:none;
                  -moz-user-select:none;
                  -ms-user-select:none;
                  user-select:none;	
              }
      }
    }
    
  }
  ._center_list {
    margin-top: 10px;
    ._list {
      box-shadow: 0 8px 12px 5px #ebedf0;
      border-radius: 5px;
      margin-top: 30px;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      ._list_ {
        width: 100%;
       
        padding: 10px 5px 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom:1px solid rgb(234, 231, 231,.5);
        &:last-child {
          border:none;
        }
        ._left {
            width: 150px;
          text-align: center;
           font-size: 14px;
          
        }
        ._right {
           flex: 1;
           font-size: 12px;
           color: #888;
           word-wrap:break-word; 
          word-break:break-all; 
          overflow: hidden;       
              line-height: 20px;  
        }
      }
    }
  }
}
</style>